<template>
  <div class="modal_user_guide">
    <div v-if="isLeftArrowDirection" class="modal_left mt-[20px] ml-[16px]" />
    <div class="modal_right">
      <div v-if="newUserGuideStep === 4" class="top_arrow"></div>
      <span style="white-space: pre-wrap">{{ title }}</span>
      <svg
        class="mt-[16px]"
        xmlns="http://www.w3.org/2000/svg"
        width="368"
        height="1"
        viewBox="0 0 368 1"
        fill="none">
        <path d="M0 0.5H368" stroke="#E1E2E3" />
      </svg>
      <div class="mt-[16px] flex_r_s">
        <span class="step_num">{{ newUserGuideStep }} of 4</span>
        <div class="flex_r">
          <span
            v-slide-underline
            class="cursor-pointer base_line skip_text"
            @click="skipAll"
            v-if="newUserGuideStep !== 4">
            Skip All
          </span>
          <div
            v-hover-bg="{
              enterColor: '#F9D9C7',
              leaveColor: '#fbe6db',
            }"
            v-if="showPrevious"
            class="previous cursor-pointer ml-[16px]"
            @click="previous">
            Previous
          </div>
          <div v-hover-gradient class="next cursor-pointer ml-[16px]" @click="next">
            {{ newUserGuideStep === 4 ? 'Finish' : 'Next' }}
          </div>
        </div>
      </div>
    </div>
    <CloseView class="ml-[8px]" @close="close" />
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { useUserStore } from '@/store/user';
  import CloseView from '@/components/Close.vue';
  const userStore = useUserStore();
  const emit = defineEmits(['close', 'next', 'previous', 'skipAll', 'finish']);
  const props = defineProps({
    title: { type: String, default: '' },
    showPrevious: { type: Boolean, default: true },
  });

  const isLeftArrowDirection = computed(() => {
    return newUserGuideStep.value !== 4;
  });
  const newUserGuideStep = computed(() => userStore.newUserGuideStep);
  const previous = () => {
    emit('previous');
  };

  const next = () => {
    if (newUserGuideStep.value === 4) {
      userStore.setNewUserGuideStep(null);
      emit('finish');
      return;
    }
    emit('next');
  };

  const skipAll = () => {
    userStore.setNewUserGuideStep(null);
    emit('skipAll');
  };

  const close = () => {
    userStore.setNewUserGuideStep(null);
    emit('close');
  };
</script>

<style scoped lang="scss">
  .modal_user_guide {
    display: flex;
    flex-direction: row;
  }
  .flex_r_s {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .modal_left {
    width: 0;
    height: 0;
    /* 右侧边框可见，其他方向边框透明 */
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #fff; /* 三角形颜色 */
  }
  .top_arrow {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff; /* 三角形颜色 */
    position: absolute;
    top: -8px;
    z-index: 9999;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .modal_right {
    display: flex;
    width: 400px;
    padding: 16px;
    flex-direction: column;
    border-radius: 8px;
    background: var(---0, #fff);
    color: var(---9, #222);
    font-family: 'Inter Tight';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    align-self: flex-start;
    position: relative;
  }
  .step_num {
    font-weight: 400;
  }
  .skip_text {
    font-size: 14px;
  }
  .flex_r {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .previous {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(---, #fbe6db);
    backdrop-filter: blur(2px);
    color: var(---, #f76b1b);
    font-family: 'Inter Tight';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .next {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
    backdrop-filter: blur(2px);
    color: var(---0, #fff);
    font-family: 'Inter Tight';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
</style>
